<template>
	<div style="margin-right: 30px;">
		<el-form label-width="100px" :rules="rule" ref="formObj"  :model="maintenanceform">
			 <el-form-item label="投诉类别" required prop="type">
			    <el-radio-group v-model="maintenanceform.type">
			      <el-radio label="公共设施维修"></el-radio>
			      <el-radio label="水电维修"></el-radio>
				  <el-radio label="安全系统维修"></el-radio>
				  <el-radio label="道路停车场维修"></el-radio>
				  <el-radio label="房屋结构与装修维修"></el-radio>
				  <el-radio label="其他"></el-radio>
				</el-radio-group>
				</el-form-item>
			  <el-form-item label="具体描述" required prop="content">
			     <el-input 
				 type="textarea" 
				 v-model="maintenanceform.content" 
				 placeholder="请对维修物品或家具进行一些具体描述"
				  maxlength="60"
				show-word-limit
				:rows="6"
				 
				></el-input>
			   </el-form-item>
			 <el-form-item label="预约时间" >
			    <el-col :span="11">
					<el-form-item prop="date">
						<div class="block">
						    <div class="demonstration"></div>
						      <el-date-picker
						        v-model="maintenanceform.repairTime"
						        type="datetime"
						        placeholder="请选择预约时间"
						        value-format="YYYY-MM-DD HH:mm:ss"/>
						</div>
				  </el-form-item>
			    </el-col>
			  </el-form-item>
			  <div style="margin-left: 50px; font-size: 0.8rem; color: #ff0004; margin-bottom: 10px;">
				  *注：上门时间和预约时间误差在两个小时之内，如有问题，下方电话联系我们
				  </div>
			 <el-form-item>
			    <el-button type="primary"  @click="save()"  plain>提交</el-button>
			    <el-button type="danger" @click="reset()" plain>重置</el-button>
			  </el-form-item>
		</el-form>
		
	</div>
</template>

<script setup lang="ts">
	import { reactive,ref,  } from 'vue'
	import { getCookieForObject} from '@/util';
	import{_axios} from '@/plugins/axios'
	import { get, post } from '@/plugins/axios'
	const emits = defineEmits(['update:show', 'getTableData'])
	const props = defineProps(['id'])
	const formObj = ref()
	console.dir(props.id)
const maintenanceform=reactive({
		id:'',
		type:null,
		content:'',
		repairTime:'',
	})
function getUserId(){
		 const userinfo= getCookieForObject('user')
         return userinfo.id
	 }
const userId=getUserId()
const rule = reactive({
	 content: [
	   { required: true, message: '请输入相关描述', trigger: 'blur' },
	   ],
	 type: [
	   {required: true,message: '请选择类型',trigger: 'change',}
	   ]
})
function check (rules, value, callback) {
	get('/repair/check', { id: props.id, value, field: rules.field }, content => {
		if (content) {
			callback()
		} else {
			callback(new Error())
		}
	})
}

function save()
{
	formObj.value.validate(valid=>{
		if(valid){
			if(props.id)
			{
				post('/repair/update',{id:props.id,type:maintenanceform.type,content:maintenanceform.content,repairTime:maintenanceform.repairTime},content=>{
					emits('update:show',false)
					emits('getTableData')
				})
			}
			else{
				post('/repair/add',{userId:userId,type:maintenanceform.type,content:maintenanceform.content,repairTime:maintenanceform.repairTime},content=>{
					emits('update:show',false)
					emits('getTableData')
				})
			}
		}
		})
}
function getById () {
	get('/repair/getById', { id: props.id }, content => {
		for (const key in maintenanceform) {
			if (Object.prototype.hasOwnProperty.call(content, key)) {
				maintenanceform[key] = content[key]
			}
		}
		maintenanceform.repairTime = maintenanceform.repairTime.replace("T", " ");
	})
}
if (props.id)
	{
		maintenanceform.id = props.id
		getById()
	}
function reset()
{
	maintenanceform.type=null,
	maintenanceform.content='',
	maintenanceform.repairTime=''
}
</script>

<style scoped lang="scss">
</style>